<template>
    <div class="content" @click="noshowfun">
  
      <div class="content-title">
        {{ sjgk.activityName }}
      </div>
  
      <div class="content-tb">
        <div class="content-tb-title">
          数据概括
        </div>
        <div class="content-chartortest">
          <div class="content-chartortest-left">
            <div ref="echartsummarize" class="echartview"></div>
          </div>
          <div class="content-chartortest-right">
            <div class="content-chartortest-right-item">
              <div class="content-chartortest-right-item-title">
                <span class="bt"></span>
                <p>已消耗总额</p>
                <div class="icom-show" >
                <img @click.stop="showfun" src="" />
                <div class="icom-jiao" v-if="showsm">
                  
                </div>
                <div class="icom-test" v-if="showsm">
                    该值来源于平台接口数据，不包含用户退款数据，可能出现预算消耗率超过100%的情况。
                </div>
            </div></div>
              <div  class="content-chartortest-right-item-num">
                <span>{{ sjgk.consumeAmount}}</span>
                <span>{{sjgk.consumeRate}}%</span>
              </div>
            </div>
            <div class="content-chartortest-right-item">
              <div class="content-chartortest-right-item-title">
                <span></span>
                <p>剩余总额</p>
              </div>
              <div  class="content-chartortest-right-item-num">
                <span>{{ sjgk.surplusAmount }}</span>
                <span>{{sjgk.surplusRate}}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-tb">
        <div class="content-tb-title">
          活动效果趋势图
        </div>
        <div class="content-chartortest twocharttwo">
  
          <!-- <div class="content-chartortest-left"></div>
          <div class="content-chartortest-right">
            
          </div> -->
          <div ref="echarttwo" class="echartview"></div>
        </div>
      </div>
      <div class="content-tb">
        <div class="content-tb-title det-tile">
          <span>活动详情</span>
          <div class="content-tb-select"><van-dropdown-menu :overlay="false" :close-on-click-outside="true"
              :close-on-click-overlay="true">
              <van-dropdown-item v-model="value" :options="option" @change="dropdownchange"/>
            </van-dropdown-menu></div>
        </div>
        <div class="content-chartortest tb-index">
          <table>
            <tr>
              <th>券名称</th>
              <th>时间</th>
              <th>配置数量</th>
              <th>核销数量</th>
              <th>核销率</th>
              <th>剩余预算  </th>
            </tr>
            <tr v-for="(item , index) in couponList" :key="index">
            <td>{{ item.couponName }}</td>
              <td>{{ item.beginDate }}</td>
              <td>{{ item.couponNum }}</td>
              <td>{{ item.consumeNum }}</td>
              <td>{{ item.consumeRate }}%</td>
              <td>{{ returnFloat(item.surplusNum) }}</td>
            </tr>
            
  
          </table>
          <div class="nodate" v-if="couponList.length==0">
            暂无活动
           </div>
        </div>
      </div>
  
      <div class="content-tb last-bt">
        <div class="content-chartortest text-tjsm">
          <div class="text-tjsm-test">
            统计数据说明
          </div>
          <div class="text-tjsm-item">
            <div class="text-tjsm-item-title">时间</div>
            <div  class="text-tjsm-item-test">可用时间</div>
          </div>
          <div class="text-tjsm-item">
            <div class="text-tjsm-item-title">配置数量 </div>
            <div  class="text-tjsm-item-test">实际配置数量</div>
          </div>
          <div class="text-tjsm-item">
            <div class="text-tjsm-item-title">核销数量</div>
            <div  class="text-tjsm-item-test">已核销的券的总数量</div>
          </div>
          <div class="text-tjsm-item">
            <div class="text-tjsm-item-title">核销率</div>
            <div  class="text-tjsm-item-test">核销金额/领券金额</div>
          </div>
          <div class="text-tjsm-item">
            <div class="text-tjsm-item-title">剩余预算</div>
            <div  class="text-tjsm-item-test">配置金额-核销金额</div>
          </div>
        </div>
      </div>

      <div class="food-bt" v-if="showbt">
        <!-- <van-button @click="fanhuifun">默认按钮</van-button> -->
        <div  @click="fanhuifun">返回</div>
      </div>

      <div class="login-tg" v-if="showlogin">
      <van-loading type="spinner" size="60px" color="#1989fa" />
    </div>
  
      <!-- <div ref="echartview" class="echartview"></div> -->
      <!-- <div class="title">测试首页</div> -->
      <!-- <div id="main"></div> -->
      <!-- <canvas id="main"></canvas> -->
    </div>
  </template>
  <script>
  import * as echarts from 'echarts';
  import testApi from "@/api/test";
  import { Dialog } from 'vant-green';
//   import {getactList} from "@/api/api";
  
  // import {getactList} from "@/api/testrq"
  
  let optionsummarize = {
    title: {
      text: '数据概括',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#000000',
        fontSize: 10,
        lineHeight: 20,
        fontWeight: 'bold'
      }
    },
    color:['#00cf6a', '#5d8dff', '#FFC851','#5A5476','#1869A0','#FF9393'],
    // formatter: function (val) { return "数据概括\n1000"; },
    tooltip: {
      trigger: 'item',
      position: 'inside',
      triggerOn: "mousemove",
      title: {
        show: false
      }
    },
    legend: {
      top: '5%',
      left: 'center',
      show: false,
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '80%'],
        
        avoidLabelOverlap: false,
        show:false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 8,
            fontWeight: 'bold',
            // position: 'center'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
        ]
      }
    ]
  };
  let optiontwo={
    // bottom:0,
    
  //   title: {
  //     top: '20',
  //     right: '10',
  //     text: 'Large Area Chart',
  //     textStyle: {
  
  // color: '#333333',
  
  // fontWeight: 'bold',
  
  // fontSize: 10
  
  // }
  //   },
  // roam:false,
  animation: false,
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    // yAxis: {
      
     
    // },
    yAxis: {
      type: 'value',
      
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#444343',
      },
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      itemHeight: 10,
            itemWidth: 10,  
          // data: ['南宁-曼芭', '桂林-曼芭', '南宁-甲米'],
          data:[  {name:'截止核销数',icon:'circle'},],//分别修改legend格式
          right: '4%',
          top:'5%',
          textStyle: {
              fontSize: 14,
              color: '#000000',
          }
    },
    grid:{
      top:50,
      left:10,
      right:10,
      bottom:45,
      containLabel: true, 
      zoomOnMouseWheel:false, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
  moveOnMouseMove:false,
  moveOnMouseWheel:false,//鼠标滚轮实现移动
      
    },
   
    dataZoom: [
         
      {
        type: 'inside',
        start: 80,
        end: 100,
        zoomLock: true,
  zoomOnMouseWheel:false, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
  moveOnMouseMove:false,
  moveOnMouseWheel:false,//鼠标滚轮实现移动
        
  
        
      },
      {
        start: 0,
        end: 50,
        bottom: 15,//下滑块距离x轴底部的距离
            height : 20,//下滑块手柄的高度调节
        zoomLock: true,
        zoomOnMouseWheel:false, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
  moveOnMouseMove:true,
        moveOnMouseWheel:true,
      }
    ],
    series: [
      
      {
        name:'截止核销数',
        data: [820, 932, 901, 9322334, 122, 1330, 1320],
        type: 'line',
        stack: 'Total',
        // smooth: true,
        zoomOnMouseWheel:false, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
  moveOnMouseMove:true,
        moveOnMouseWheel:true,
        
      }
    ]
  };
 
  export default {
    name: 'det',
    data () {
      return {
        msg: 'Hello Vue!',
        echart: null,
        value: 0,
        option: [
          { text: '全部', value: 0 },
          { text: '微信', value: 1 },
          { text: '支付宝', value: 2 }
        ],
        echartone: null,
        echarttwo: null,
        queryData:{type:''},
        sjgk:{},
        trendList:[],
        couponList:[],
        showsm:false,
        showlogin:false,
        showbt:false
      }
    },
    mounted () {
        this.queryData.id=this.$route.query.id

        if (this.$route.query.type==1) {
          console.log("有只")
          this.showbt=true
        }
       
        this.getdetfun()
       
       
    
      this.$nextTick(() => {
  
        this.echartone = echarts.init(this.$refs.echartsummarize)
        this.echarttwo = echarts.init(this.$refs.echarttwo)
        // this.echart = echarts.init(this.$refs.echartview);
        // this.echart.setOption(option);
       
        // 基于准备好的dom，初始化echarts实例
        setTimeout(() => {
          window.addEventListener("resize", () => {
            // console.log("resize")
            // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
            // this.echart.resize();
            this.echartone.resize();
            this.echarttwo.resize();
          });
        }, 1000);
      
      })
  
    },
    methods:{
      returnFloat(num) {
  num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
  if (num.indexOf(".") !== -1) {
    let [integerPart, decimalPart] = num.split(".");
 
    if (decimalPart.length > 2) {
      decimalPart = decimalPart.substring(0, 2);
    } else if (decimalPart.length === 1) {
      decimalPart += "0";
    }
 
    num = `${integerPart}.${decimalPart}`;
  } else {
    num += ".00";
  }
 
  return num;
},
      fanhuifun(){
        window.history.back()
      },
        noshowfun()
        {
            this.showsm=false
        },
        showfun(){
            this.showsm=!this.showsm
        },
        dropdownchange(value){
            console.log("value",value)
            if(this.queryData.type==value){
                return

            }else{
                if(value!=0){
                    this.queryData.type=value
                }else{
                    this.queryData.type=""
                }
            }
            console.log(this.queryData.type)
            this.selectfun()
        },
        selectfun(){
            this.getdetfun()
        },
        async getdetfun(){
          var that =this
            this.showlogin=true
        let res= await testApi.queryData(this.queryData)
            console.log (res)
        if(res.data.result==0){
          document.title=res.data.sjgk.activityName
            this.sjgk=res.data.sjgk
        this.trendList=res.data.trendList
        this.couponList=res.data.couponList
          optionsummarize.title.text='总预算' + "\n" + this.sjgk.allAmount
        //   value: 1048, name: 'Search Engine'
          optionsummarize.series[0].data[0].name='已消耗预算' 
          optionsummarize.series[0].data[0].value=this.sjgk.consumeAmount
          optionsummarize.series[0].data[1].name='剩余预算' 
          optionsummarize.series[0].data[1].value=this.sjgk.surplusAmount
          
          let data=[];
          let num=[];
          res.data.trendList.forEach(element => {
            data.push(element.day)
            num.push(element.num)
          });
          optiontwo.xAxis.data=data
          optiontwo.series[0].data=num

        }else{
          Dialog.alert({
  title: '提示',
  message: '该活动已经停用或者'+'\n'+'失效，请确认返回或者退出。',
  confirmButtonText: '确定'
}).then(() => {
  console.log("点击")
  document.title="已失效"
  if(that.$route.query.type){
    
    console.log("点击1")
    that.$router.go(-1)
  }else{

    console.log("点击2")
    window.close()
  }
  // on close
});
        }

        this.showlogin=false
        this.echartone.setOption(optionsummarize);
        this.echarttwo.setOption(optiontwo);
  
        
        
            // return res
        }
    },
    /**
     * 清除echartresize事件
     */
    beforeDestroy () {
      /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
        容易导致内存泄漏和额外CPU或GPU占用哦 */
      window.removeEventListener("resize", () => {
        // this.echart.resize();
        this.echartone.resize();
        this.echarttwo.resize();
      });
    },
  }
  </script>
  <style  lang="less">
  .title {
    font-size: 24px;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
  }
  
  .echartview {
    width: 100%;
    height: 100%;
    position: relative;
  
  }
  
  .echartview canvas {
    width: 100% !important;
    height: 100% !important;
  }
  
  .content {
    width: 100%;
    height: 100vh;
    // background-color: aliceblue;
  }
  
  .content-title {
    font-size: 18px;
    font-weight: bold;
    padding-top: 20px;
    padding-left: 10px;
  
  }
  
  .content-tb-title {
    margin-left: 10px;
    border-left: 5px solid #5d8dff;
    padding-left: 8px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: bold;
  }
  
  .content-chartortest {
    width: calc(100% - 20px);
    margin: 0 auto;
    margin-top: 20px;
    height: 160px;
    background-color: white;
    border-radius: 20px;
    display: flex;
    justify-content: center;
  
    align-items: center;
  }
  .twocharttwo{
    height: 320px;
  }
  .tb-index{
    width: 100%;
    border-radius: 0px;
    display: block;
    height: auto;
    table{
      display: table;
      table-layout: fixed;
  
    }
    tr >th{
      text-align: center;
      background: #5d8dff;
      height: 30px;
      border-right: 1px solid #e9e9ff;
      color: white;
    }
    tr >td{
      text-align: center;
      padding: 5px 0;
      // background: #5d8dff;
    }
  }
  .text-tjsm{
    height: auto;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 20px 20px;
    margin-bottom: 40px;
    .text-tjsm-test{
      width: 100%;
      font-size: 16px;
      margin-bottom: 20px;
      
    }
    .text-tjsm-item{
      font-size: 12px;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
      .text-tjsm-item-title{
        flex: 1;
        color: #929292;
      }
      .text-tjsm-item-test{
        flex: 3;
      }
    }
  }
  
  .content-chartortest-left {
    width: 50%;
    height: 100%;
    // background-color: #5d8dff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  
  .content-chartortest-right {
    width: 50%;
    height: 100%;
    flex: 1;
    box-sizing: border-box;
    // background-color: #ff5dce;
    border-radius: 20px;
    display: flex;
    padding: 10px 10px;
    // justify-content: center;
    align-items: center;
    // flex-direction: column;
    flex-wrap: wrap;
  }
  .content-chartortest-right-item{
    width: 100%;
    box-sizing: border-box;
    height: 60px;
    background: #e9e9ff;
    border-radius: 10px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-right: 10px;
    // align-items: center;
  
  }
  // .content-chartortest-right-item:first-child{
  //   margin-bottom: 10px;
  
  // }
  .content-chartortest-right-item-title{
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
  
    // margin-bottom: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    
    span{
      display: block;
      width: 12px;
      height: 12px;
      background:#5d8dff;
      margin-right: 4px;
    }
    .icom-show{
        margin-left: 5px;
        width: 12px;
      height: 12px;
      position: relative;
      .icom-test{
        position: absolute;
        bottom: 25px;
        width: 160px;
        height: auto;
        left: -80px;
        font-size: 10px;
        box-sizing: border-box;
        padding: 10px 10px;
        border-radius: 12px;
        font-weight: normal;
        background: white;
        border: 1px solid #5d8dff;
        z-index: 1;

        
      }
    
    }
    .icom-jiao{
        display: block;
        width: 10px;
        height: 10px;
        // border: 1px solid blue;
        // border
        border-right: 1px solid #5d8dff;
        border-bottom: 1px solid #5d8dff;
        position: absolute;
        bottom: 20px;
        left: 0;
        z-index: 100;
        transform: rotate(45deg);
        background-color: white;
      }
    img{
        width: 12px;
      height: 12px;
      
    }
    .bt{
        background-color: #00cf6a;
    }
  }
  .content-chartortest-right-item-num{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: bold;
  }
  
  .content-tb-select {
    width: 70px;
  }
  
  .det-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .van-dropdown-menu__bar {
    text-shadow: none;
    background-color: #ececec;
    height: auto;
    box-shadow: none;
  }
  .nodate{
    font-size: 12px;
    text-align: center;
    color: #adadad;
    line-height: 40px;
  }
  .login-tg{
    width: 100%;
    height: 100vh;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    // background-color: red;
    left: 0;
    top: 0;
  }
  .last-bt{
    padding-bottom: 20px;
  }
  .food-bt{
    width: 100%;
    height: 50px;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: white;
    border-top: 1px solid rgb(168, 168, 168) ;
    div {
      width: 80%;
      border-radius: 30px;
      border: 1px solid rgb(168, 168, 168);
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      
    }
  }
//   .content-tb{
//     margin-bottom: 50px;
//   }
  </style>
  